<template>
  <div class="header">
    <!-- 如果购物车为空，显示这个头部的导航栏-->
    <div class="header-top border-bottom" v-show="length == 0">
      <p class="left">购物车</p>
      <p class="right">编辑</p>
    </div>

    <!-- 如果购物车不为空，显示这个头部的导航栏-->
    <div class="header-top border-bottom" v-show="length">
      <p class="left">购物车({{length}})</p>
      <p class="right"  v-show="rightShow" @click="editClick">编辑</p>
       <p class="right" v-show="!rightShow" @click="editClick">完成</p>
    </div>
    
  </div>
</template>

<script>
import {mapGetters,mapState}  from 'vuex'
export default {
  name: 'ShopCartHeader',
  methods: {
    editClick () {
     this.$store.commit('rightShow')
    }
  },
  computed: {
    /* ...mapGetters({'cartLength'}) */
    ...mapGetters({length:'cartLength'}),
    ...mapState(['rightShow'])
  }
}
</script>

<style lang="less" scoped>
  .header {
    top: 0;
    .header-top {
      height: .44rem;
      background: #fff;
      align-items: center;
      line-height: .44rem;
      display: flex;
      justify-content: space-between;
      .left {
        font-size: .18rem;
        color: #333;
        margin-left: 1.615rem;
      }
      .right {
        margin-right: .155rem;
        font-size: .14rem;
        color: #333;
      }
    }
  }
</style>